<template>
  <div class="tool-container-wrapper">
    <!-- 面包屑导航 -->
    <el-breadcrumb separator="/" class="breadcrumb">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>{{ toolName }}</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 主要工具容器 -->
    <div class="tool-container" :class="{ 'dark-mode': isDarkMode }">
      <!-- 标签页容器 -->
      <div class="tool-tabs-container">
        <el-tabs 
          v-model="activeTab" 
          class="tool-tabs"
          :class="{ 'dark-mode': isDarkMode }"
          @tab-change="handleTabChange"
        >
          <slot name="tabs"></slot>
        </el-tabs>
      </div>

      <!-- 自定义内容区域 -->
      <div class="tool-content" v-if="$slots.content">
        <slot name="content"></slot>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'

interface Props {
  toolName: string
  defaultTab?: string
}

const props = withDefaults(defineProps<Props>(), {
  defaultTab: ''
})

const emit = defineEmits<{
  'tab-change': [tabName: string]
}>()

const activeTab = ref(props.defaultTab)
const isDarkMode = ref(false)

// 检测主题变化
function checkTheme() {
  isDarkMode.value = document.documentElement.classList.contains('dark')
}

// 监听主题变化
let observer: MutationObserver | null = null

onMounted(() => {
  checkTheme()
  
  // 创建 MutationObserver 监听主题变化
  observer = new MutationObserver(() => {
    checkTheme()
  })
  
  observer.observe(document.documentElement, {
    attributes: true,
    attributeFilter: ['class']
  })
})

onUnmounted(() => {
  if (observer) {
    observer.disconnect()
  }
})

function handleTabChange(tabName: string) {
  emit('tab-change', tabName)
}
</script>

<style scoped>
.tool-container-wrapper {
  min-height: 100vh;
  width: 100vw;
  background: var(--el-bg-color-page, #f5f7fa);
  margin: 0;
  padding: 0;
}

.breadcrumb {
  padding: 20px 40px 0;
  margin-bottom: 20px;
  background: var(--el-bg-color-page, #f5f7fa);
}

.tool-container {
  max-width: 1200px;
  margin: 20px auto;
  padding: 0 40px;
  background: transparent;
}

.tool-tabs-container {
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
  overflow: hidden;
  border: 1px solid var(--el-border-color-lighter, #f2f6fc);
}

.tool-tabs {
  background: #ffffff;
}

.tool-tabs.dark-mode {
  background: var(--el-bg-color, #1d1e1f);
}

.tool-tabs :deep(.el-tabs__header) {
  margin: 0;
  background: #ffffff;
  border-bottom: 1px solid var(--el-border-color-lighter, #f2f6fc);
  padding: 0 24px;
}

.tool-tabs.dark-mode :deep(.el-tabs__header) {
  background: var(--el-bg-color, #1d1e1f);
  border-bottom-color: var(--el-border-color, #414243);
}

.tool-tabs :deep(.el-tabs__nav-wrap) {
  padding: 0;
}

.tool-tabs :deep(.el-tabs__item) {
  height: 60px;
  line-height: 60px;
  font-size: 16px;
  font-weight: 500;
  color: var(--el-text-color-regular, #606266);
  border: none;
  padding: 0 24px;
  margin-right: 8px;
  border-radius: 8px 8px 0 0;
  transition: all 0.3s ease;
}

.tool-tabs :deep(.el-tabs__item:hover) {
  color: var(--el-color-primary, #409eff);
  background: var(--el-color-primary-light-9, #ecf5ff);
}

.tool-tabs :deep(.el-tabs__item.is-active) {
  color: var(--el-color-primary, #409eff);
  background: var(--el-color-primary-light-9, #ecf5ff);
  font-weight: 600;
}

.tool-tabs :deep(.el-tabs__active-bar) {
  background: var(--el-color-primary, #409eff);
  height: 3px;
  border-radius: 2px;
}

.tool-tabs :deep(.el-tabs__content) {
  padding: 32px;
  background: #ffffff;
  min-height: 400px;
}

.tool-tabs.dark-mode :deep(.el-tabs__content) {
  background: var(--el-bg-color, #1d1e1f);
}

.tool-content {
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
  padding: 32px;
  margin-top: 20px;
  border: 1px solid var(--el-border-color-lighter, #f2f6fc);
}

.tool-container.dark-mode .tool-content {
  background: var(--el-bg-color, #1d1e1f);
  border-color: var(--el-border-color, #414243);
}

/* 响应式设计 */
@media (max-width: 1000px) {
  .tool-container {
    padding: 0 20px;
  }
  
  .breadcrumb {
    padding: 15px 20px 0;
  }
  
  .tool-tabs :deep(.el-tabs__content) {
    padding: 24px;
  }
  
  .tool-content {
    padding: 24px;
  }
}

@media (max-width: 768px) {
  .tool-container {
    padding: 0 16px;
  }
  
  .breadcrumb {
    padding: 12px 16px 0;
  }
  
  .tool-tabs :deep(.el-tabs__item) {
    height: 50px;
    line-height: 50px;
    font-size: 14px;
    padding: 0 16px;
    margin-right: 4px;
  }
  
  .tool-tabs :deep(.el-tabs__content) {
    padding: 20px;
  }
  
  .tool-content {
    padding: 20px;
  }
}

@media (max-width: 480px) {
  .tool-container {
    padding: 0 12px;
  }
  
  .breadcrumb {
    padding: 10px 12px 0;
  }
  
  .tool-tabs :deep(.el-tabs__item) {
    height: 45px;
    line-height: 45px;
    font-size: 13px;
    padding: 0 12px;
    margin-right: 2px;
  }
  
  .tool-tabs :deep(.el-tabs__content) {
    padding: 16px;
  }
  
  .tool-content {
    padding: 16px;
  }
}
</style> 